<template>
  <div class="map-container">
    <div class="map-info">
      <el-row>
        <el-col :span="6">
          <el-input v-model="cigId" placeholder="请输入小区id"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="search">查找小区</el-button>
        </el-col>
        <el-col :span="6">
          <el-input v-model="color" placeholder="小区颜色"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="success" @click="renderVector">重新渲染</el-button>
        </el-col>
      </el-row>
      
    </div>
    <l-map
      ref="map"
      class="map"
      :zoom="zoom"
      :maxZoom="maxZoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <l-control-layers position="topright" :collapsed="false"></l-control-layers>
    <!-- 1.1基础图层 -->
      <l-tile-layer
        v-for="tile in tileProviders"
        ref="baseLayer"
        :key="tile.name"
        :name="tile.name"
        :visible="tile.visible"
        :url="tile.url"
        :attribution="tile.attribution"
        :options="tile.options"
        layer-type="base"
      />

      
      <!-- 覆盖图层 -->
      <l-layer-group layer-type="overlay" name="小区图">
        <map-protobuf ref="cgi" :url="protobuf.tilesUrl" :options="protobuf.opts"></map-protobuf>
      </l-layer-group>
     
    </l-map>
  </div>
</template>
<script>
import {
  LMap,
  LTileLayer,
  LControlLayers,
  LLayerGroup,
  LCircle
} from 'vue2-leaflet'
import MapVectorGridProtobuf from './components/MapVectorGridProtobuf'

export default {
  name: 'MapControlLayer',
  data() {
    return {
      cigId: '',
      color: '#ff0000',
      zoom: 8,
      maxZoom: 16,
      center: [31.6679687, 104.040182 ],
      // 可选的底图
      tileProviders: [
        {
          name: '高德',
          visible: true,
          url:
            'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德'
        },
        {
          name: '高德卫星',
          visible: false,
          url:
            'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德卫星'
        },
        {
          name: '离线地图',
          visible: false,
          url: 'https://api.maptiler.com/tiles/v3/{z}/{y}/{x}.pbf.pict?key=UmmATPUongHdDmIicgs7',

          attribution: '离线地图'
        }
      ],
      protobuf: {
        opts: {
          rendererFactory: L.svg.tile,
          attribution: '小区',
          //subdomains: '0123',
          //key: 'UmmATPUongHdDmIicgs7',
          // 超过此值就不会请求数据了
          minZoom: 1,
          maxZoom: 16,
          zIndex: 10,
          // 唯一id
          getFeatureId: function(f) {
              return f.properties.CGI;
          },
          vectorTileLayerStyles: {
            // key为图层的名称
            'cgi-polygon': this.getVectorTileStyles
          }
        },
        tilesUrl: 'http://10.121.138.186:8003/geoserver/gwc/service/tms/1.0.0/cite%3Acgi-polygon@3857@pbf/{z}/{x}/{-y}.pbf'
        // tilesUrl: 'http://localhost:8081/geoserver/gwc/service/tms/1.0.0/cite%3Acgi@3857@pbf/{z}/{x}/{-y}.pbf'
        // tilesUrl: 'http://localhost:8081/geoserver/gwc/service/tms/1.0.0/cite%3Aimsi-polygon@3857@pbf/{z}/{x}/{-y}.pbf'
      }
    }
  },
  components: {
    'l-tile-layer': LTileLayer,
    'l-control-layers': LControlLayers,
    'l-layer-group': LLayerGroup,
    'l-map': LMap,
    'map-protobuf': MapVectorGridProtobuf
  },
  methods: {
    zoomUpdated(zoom) {
      console.log('zoomUpdated=' + zoom)
    },
    centerUpdated(center) {
      console.log('centerUpdated=' + center)

      // var _vectorTiles = this.$refs.cgi.mapObject._vectorTiles ;

      // for (var tileKey in _vectorTiles) {
      //   var tile = _vectorTiles[tileKey];
      //   var features = tile._features;
      //   var data = features[this.cigId];
        
      //   if (data) {
      //     var leafId = data.feature.properties.Latitude;
      //     data.feature.bringToFront()
      //     // console.log(typeof(data.feature))
      //     console.log(data.feature.getBounds())
      //     // console.log(data.feature.getBounds())
      //     // this.$refs.map.mapObject.fitBounds(layers[leafId].getBounds())
      //   }
      // }
    },
    boundsUpdated(bounds) {
      console.log('boundsUpdated=' + bounds)
    },
    // 矢量数据样式
    getVectorTileStyles(properties, zoom, geometryDimension) {
      console.log("properties.CGI="+properties.CGI)
      var cgi = parseInt(properties.CGI)
      return {
        fill: true,
        weight: 1,
        fillColor: cgi%2==0?'#06cccc':this.color,
        color: '#06cccc',
        fillOpacity: 0.2,
        opacity: 0.4,
      }
    },
    // 查询小区
    search(){
      // 重置之前的小区样式
      // this.$refs.cgi.mapObject.resetFeatureStyle(this.cigId)

      // 修改小区样式
      this.$refs.cgi.mapObject.setFeatureStyle(this.cigId, {
        fill: true,
        weight: 2,
        fillColor: '#00ff00',
        color: '#06cccc',
        fillOpacity: 0.9,
        opacity: 0.8,
      });

      //122306337 获取小区中心点，修改地图视野
      // this.$refs.map.mapObject.setView([31.129391, 104.402778],16);

    },
    renderVector(){
        this.$refs.cgi.mapObject.redraw()
    }
  },
  mounted() {
    this.$nextTick(() => {})
  },
  beforeDestroy() {
    this.$refs.map.mapObject.remove()
  }
}
</script>
